<template lang="pug">
.px-6.pt-2

  .form
    .flex.gap-4.items-center.mb-2
      .text-sm.text-focus.w-20 报价单编号:
      view.text-focus 201422222222222
    .flex.gap-4.items-center.mb-2
      .text-sm.text-focus.w-20 客户:
      .flex-1
        .add-btn(@click="openPopup()") {{form.kehu.name}}

    .flex.gap-4.items-center.mb-2
      .text-sm.text-focus.w-20 发票抬头:
      .flex.items-center.flex-1
          .add-btn(@click="invoice()") 
            text
            text 点击选择
    .flex.gap-4.items-center.mb-2
      .text-sm.text-focus.w-20 送货地址：
      .flex.items-center.flex-1
          .add-btn(@click="address()") 点击选择

.divider.my-6.mx-auto.mx-2
.catg-warp
  .catg-box(v-for="(item,i) in baojiaList" :key="i")
    .name {{item.name}}
    view
    .num 数量：{{item.n}}
    .price 价格：{{item.price}}

.bottom-btn
  .flex.justify-around
    button.sub-btn.w-32.mb-2(@click="toCatg") 添加单品
    button.submit-btn.w-32.mb-2(@click="toBaojiaList") 立即下单
  .hint *这里写流程说明，比如写立即下单后一个工作日内为您审核.审核后为您生成合同
uni-popup(ref="popup" type="bottom") 
  .popup-bottom
    .flex.font-medium.mb-8.text-base.justify-between.items-center
      .flex-1 选择客户
      button.option-btn(@click="submitChoose") 确定
    view(class="h-[50vh] overflow-y-auto")
      .kehu-box(v-for="item in kehuList" :key="item.phone" :class="{active:(choosen===item)}"
        @click="choosen=item")
        .name {{item.name}}
        .phone {{item.phone}}
</template>
<script setup>
const baojiaList = ref([
  {name:"枕套1",n:'100',price:'10'},
  {name:"枕套2",n:'100',price:'10'},
  {name:"枕套3",n:'100',price:'10'},
  {name:"枕套4",n:'100',price:'10'},
  {name:"枕套5",n:'100',price:'10'},
])
const kehuList = ref([
  {name:"张三",phone:'13333333333'},
  {name:"李刚",phone:'13333333344'},
  {name:"王五",phone:'13333333355'},
])

const form = reactive({
  kehu:kehuList.value[0],
  invoice:null,
  address:null,
})
function toCatg(){
  uni.navigateTo({
    url:`/pages/index/categoryInside?baojiaName=${`202411112131223`}`
  })
}

function toBaojiaList(){
  uni.redirectTo({
    url:'/pages/state/hetongSuccess'
  })
}
function invoice(){
  uni.chooseInvoiceTitle({
    success(res){
      console.log(res);
      form.invoice = res
    }
  })
}
function address(){
  uni.chooseAddress({
    success(res){
      console.log(res);
      form.address = res
    }
  })
}
 // ==== pop start ==== 
const choosen = ref(kehuList.value[0]);
const popup = ref(null)
async function openPopup () {
  popup.value.open();
}
function submitChoose(){
  form.kehu = choosen.value;
  closePopup()
}
function closePopup () {
  popup.value.close();
}
// ==== pop end ====
</script>
<style scoped lang="scss">
.add-btn {
  @apply flex-1 border border-focus rounded text-center text-focus py-2 bg-white text-sm;
}
.kehu-box{
  @apply px-4 py-2 border border-gray-200 rounded mb-2;
  .name{
    @apply text-base mb-1;
  }
  .phone{
    @apply text-sm text-gray-600;
  }
  &.active{
    @apply border-focus;
  }
}
.catg-warp{
  @apply px-2 h-[54vh] overflow-y-auto;
}
.catg-box{
  @apply bg-white rounded px-4 py-2 grid grid-cols-2 text-gray-800 mb-2 border border-focus;
  .name{
    @apply text-base;
  }
  .price,.num{
    @apply text-xs text-gray-400;
  }

}
.bottom-btn {
  @apply fixed bottom-[calc(env(safe-area-inset-bottom)+1vh)] w-full flex-col items-center justify-center;
}
</style>